<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!------------------------------------------css样式----------------------------------->
    <style>
        ul,li{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            
        }
        .box{
            width: 400px;
            border:1px solid #dddddd;
            padding: 0 20px 20px 20px;
            margin: auto;
        }
        input[type=text]{
            width: 357px;
            height: 25px;
            margin:15px 0 0 0px;
            outline-color: aqua;
        }
        .box .choice ul{
            margin: 20px 0;
        }
        .box .choice ul li{
            height: 30px;
            line-height: 30px;
            border: 1px solid #dddddd;
            border-bottom: none;
        }
        .box .choice ul li:last-child{
            border-bottom: 1px solid #dddddd;
        }
        .box .choice ul li:hover{
           background-color: gray;
        }
        .box .choice ul li:hover input[type=button]{
           display: inline-block;
        }
        .box .choice input{
            margin-left: 20px;
        }
        input[type=button]{
            float:right;
            margin-right: 20px;
            border-radius: 5px;
            background-color: red;
            color: white;
            border-color: transparent;
        }
        .box .choice input[type=button]{
            display: none;
            margin-top: 4px;   
        }
        .box .total{
            margin-top:20px;
        }
        .box .total input[type=button]{
            display: inline-block;
        }
    </style>
</head>
<body>
    <!--------------------------------------------布局------------------------------------->
    <div class="box">
        <input style="width:396px;" class="task" type="text" name="task" id="",value="请输入你的任务名称，按回车键确认">
        <div class="choice">
            <ul>
                <li>
                    <input type="checkbox" name="eat">吃饭
                    <input type="button" value="删除">
                </li>
                <li>
                    <input type="checkbox" name="eat">睡觉
                    <input type="button" value="删除">
                </li>
                <li>
                    <input type="checkbox" name="eat">语文
                    <input type="button" value="删除">
                </li>
                <li>
                    <input type="checkbox" name="eat">数学
                    <input type="button" value="删除">
                </li>
            </ul>
            <div class="total">
                <input class="finishall" type="checkbox" name="" id="">已完成
                <span>0</span><span>/全部</span><span>4</span>
                <input class="all" type="button" value="清除已完成任务">
            </div>
        </div>
    </div>
    <!--------------------------------------------script----------------------------------->
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        var task = document.getElementsByClassName("task")[0];
        var span = document.getElementsByTagName('span');
        var inputList = document.getElementsByTagName('input');     
        var finishall = document.getElementsByClassName("finishall")[0];  
        /*给已完成按钮绑定改变数值的事件*/
        finishall.addEventListener("click",function(){    
            span[0].innerHTML=span[2].innerHTML;
        })
        /*将已有的li标签绑定改变数值和删除事件*/
        for(var i = 0;i<inputList.length;i++){
            if(inputList[i].type=="button"&&i != inputList.length-1){
                inputList[i].addEventListener("click",function(){    
                    this.parentElement.remove();
                    span[2].innerHTML=parseInt(span[2].innerHTML)-1;
                })
            }
        }
        for(var i = 0;i<inputList.length;i++){
            if(inputList[i].type=="checkbox"&&i != inputList.length-2){
                inputList[i].addEventListener("click",function(){    
                    span[0].innerHTML=parseInt(span[0].innerHTML)+1;
                })
            }
        }
        /*给输入框绑定增加内容事件*/
        task.onkeypress = function(event){
            if(event.which == 13){
                addli();
            }
        }
        /*新增li标签并绑定改变数值和删除事件*/
        function addli(){
            var li = document.createElement('li');
            var inputone = document.createElement('input');
            var inputtwo = document.createElement('input');
            var te = document.createTextNode(task.value);
            inputone.setAttribute("type","checkbox");
            inputone.addEventListener("click",function(){    
                span[0].innerHTML=parseInt(span[0].innerHTML)+1;
            })
            inputtwo.setAttribute("type","button");
            inputtwo.setAttribute("value","删除");
            /*绑定删除事件*/
            inputtwo.addEventListener("click",function(){    
                this.parentElement.remove();
            })
            /*绑定改变数值事件*/
            inputtwo.addEventListener("click",function(){    
                span[2].innerHTML=parseInt(span[2].innerHTML)-1;
            })
            /*创建子节点*/
            ul.appendChild(li);  
            li.appendChild(inputone);
            li.appendChild(te);
            li.appendChild(inputtwo);     
            span[2].innerHTML=parseInt(span[2].innerHTML)+1;    
        }
        /*给最后一个清除已完成任务绑定清除功能事件*/
        var clearall = document.getElementsByClassName("all")[0];
        clearall.addEventListener("click",function(){    
                    this.parentElement.parentElement.remove();
        }) 
    </script>
</body>
</html>